@mixin buttonDefaultStyle {
  font-family: var(--secondary-font-family);
  border-radius: var(--space-3xs);
  color: #161616;
}

button {
  @include buttonDefaultStyle();
}

.button {
  @include buttonDefaultStyle();
  --line-height: 17px;
  cursor: pointer;
  padding: var(--space-sm);
  background: var(--primary);
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-style: normal;
  font-weight: var(--medium);
  font-size: var(--text-md);
  line-height: var(--line-height);
  border: none;
  max-height: 40px;
  text-align: center;
  transition: 500ms;
}

.button:disabled {
  cursor: not-allowed;
}

.button.is-small {
  min-width: 130px;
}

.button.is-primary {
  background: var(--brand-primary);
}

.button.is-primary:hover {
  background: var(--primary-hover);
}

.button.is-primary:disabled {
  color: var(--text-secondary);
  background: var(--disabled-button, var(--background-secondary));
  pointer-events: none;
}

.button.is-secondary {
  background: var(--secondary-button);
  color: var(--text-tertiary);
  transition: 500ms;
}

.button.is-secondary:hover {
  background: var(--secondary-button-overlay, var(--accent-overlay));
}

.button:disabled.is-secondary,
.button:disabled:hover.is-secondary {
  background-color: var(--disabled-button, var(--background-secondary));
  color: var(--text-secondary);
}

.button.is-tertiary {
  background: var(--tertiary-button, var(--neutral-04));
  color: (var(--text-tertiary));
}

.button.is-tertiary:hover {
  background: var(--tertiary-button-overlay, var(--body-background));
  color: var(--text-tertiary);
}

.button.is-tools:hover,
.button.is-tools:focus-visible {
  background-color: var(--stop-button);
}
.button.is-tools:hover .toolTitle,
.button.is-tools:focus-visible .toolTitle {
  transition: 500ms;
  color: var(--text-hover);
}

.button.is-empty {
  background: transparent;
  text-decoration: underline;
}

.button.is-danger {
  background: var(--cancel-button, var(--status-danger));
}

.button.is-danger:hover,
.button.is-danger:focus-visible {
  background: var(--cancel-button-overlay, var(--status-danger));
  box-shadow: 0px 0px 0px 3px var(--danger, var(--text-default));
}

.button.is-success {
  background: var(--success-button, var(--status-success));
}

.button.is-success:hover:not(:disabled) {
  box-shadow: 0px 0px 0px 3px var(--button-stroke, var(--text-default));
}

.button.is-success:hover:disabled,
.button.is-success:disabled {
  background: var(--background);
  background: var(--disabled-button);
  color: var(--text-default);
}

.button.outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid;
}

.button.outline:hover:disabled,
.button.outline:disabled {
  background-color: var(--background-secondary);
  background: var(--disabled-button);
  color: var(--text-secondary);
  border: none;
}

.button:hover.outline,
.button.outline.active {
  background: transparent;
  color: var(--accent-overlay) !important;
  border: 2px solid;
}

.button.settings {
  background: var(--text-secondary);
}

.button.settings:hover {
  background: var(--secondary-hover);
}

.button.settings:disabled:hover,
.button.settings:disabled {
  background: var(--disabled-button);
}

.button.is-text {
  background: var(--accent);
  color: var(--background);
  box-shadow: none;
  text-transform: none;
  min-width: fit-content;
  font-family: var(--content-font-family);
  font-size: var(--text-sm);
  padding: var(--space-xs);
  margin-inline-start: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.button.is-text:hover {
  background: var(--primary-hover);
}

.button.is-link {
  font-family: var(--secondary-font-family);
  font-style: normal;
  font-weight: normal;
  font-size: var(--text-md);
  line-height: 17px;
  color: var(--text-default);
  margin: var(--space-3xs) 0em;
  cursor: pointer;
  padding: var(--space-3xs);
}

.button.is-link:hover {
  color: var(--accent);
}

.button.is-link[disabled] {
  color: var(--icon-disabled);
  cursor: wait;
}

.button:disabled {
  background: var(--disabled-button);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.buttonWithIcon {
  display: flex;
  place-items: center;

  & > svg {
    height: 20px;
  }
}
